<template>
  <view class="template-course tn-safe-area-inset-bottom">
	<view class="btmbgview">
		<view class="infovvv">
			<image class="tllttimg" src="../../static/icons/tlltt.png" mode=""></image>
			<view class="namevvv">
				{{userInfo.realName?userInfo.realName:''}}
			</view>
		</view>
		<!-- 页面内容 -->
		<view class="tn-margin">
		  <tn-swiper :list="banner" :height="220" :effect3d="false" mode="dot" @click="clickBanner" imageMode="scaleToFill"></tn-swiper>
		</view>
	</view>
	<view class="itemsview-con">
		<tn-grid align="left" :col="col">
		  <block v-for="(item, index) in moduleList" :key="index">
			<!-- H5 -->
			<!-- #ifndef MP-WEIXIN -->
			<tn-grid-item>
			  <view class="tn-flex-1 tn-margin-xs tn-radius" @click="goMydetailpage(item.url)">
			    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			      <view class="iconii__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-color-white">
			        <!-- <view :class="item.icon"></view> -->
					<img :src="getImgsbase64(item.icon)" alt="" />
			      </view>
			      <view class="tn-color-black tn-text-center">
			        <text class="tn-text-ellipsis">{{item.name}}</text>
			      </view>
			    </view>
			  </view>
			</tn-grid-item>
			<!-- #endif-->
			
			<!-- 微信小程序 -->
			<!-- #ifdef MP-WEIXIN -->
			<tn-grid-item :style="{width: gridItemWidth}">
			  <view class="tn-flex-1 tn-margin-xs tn-radius" @click="goMydetailpage(item.url)">
			    <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			      <view class="iconii__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-color-white" :class="item.iconClass">
			        <img :src="getImgsbase64(item.icon)" alt="" />
			      </view>
			      <view class="tn-color-black tn-text-center">
			        <text class="tn-text-ellipsis">{{item.name}}</text>
			      </view>
			    </view>
			  </view>
			</tn-grid-item>
			<!-- #endif-->
		 </block>
		</tn-grid>
	</view>
	
	<view class="iii-item">
	  	<view class="itemcontent tn-flex tn-flex-direction-row tn-margin-bottom-sm">
	  		<view class="tn-flex tn-flex-row-center tn-color-black frameview">
	  			<img src="../../static/icons/Frame.png" alt="" />
	  		</view>
	  		<view class="tn-flex tn-flex-1 tn-color-black tn-padding-left-sm tn-text-bold">
				幼儿考勤
	  		</view>
	  		<view class="tn-flex tn-flex-row-center rightdouble"  @click="gojiluDetail">
	  			  <text style="color: #9DD757;">详细记录</text>
	  		</view>
	  	</view>
		<view class="">
			<view class="border-line-view"></view>
			<view class="tn-flex tn-flex-row-between tn-bg-white course-radius">
				<view class="tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-margin-bottom">
						今日签到
					</view>  
					<view class="tn-text-center">
					  <text class="tn-text-ellipsis">{{youerkaoqinInfo.checkInCount?youerkaoqinInfo.checkInCount:0}}人</text>
					</view>
				  </view>
				</view>
				<view class="tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-margin-bottom">
						今日未签到
					</view>  
					<view class="tn-text-center">
					  <text class="tn-text-ellipsis">{{youerkaoqinInfo.notCheckOutCount?youerkaoqinInfo.notCheckOutCount:0}}人</text>
					</view>
				  </view>
				</view>
				<view class="tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-margin-bottom">
						本月签到率
					</view>  
					<view class="tn-text-center">
					  <text class="tn-text-ellipsis">{{youerkaoqinInfo.attendance?youerkaoqinInfo.attendance:'0%'}}</text>
					</view>
				  </view>
				</view>
				<view class="tn-padding-sm tn-margin-xs row-flex">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="tn-text-center" @click="gopages">
					  <text class="tn-icon-right-fill"></text>
					  
					</view>
				  </view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="iii-item">
	  	<view class="itemcontent tn-flex tn-flex-direction-row tn-margin-bottom-sm">
	  		<view class="tn-flex tn-flex-row-center tn-color-black frameview">
	  			<img src="../../static/icons/Frame.png" alt="" />
	  		</view>
	  		<view class="tn-flex tn-flex-1 tn-color-black tn-padding-left-sm tn-text-bold">
				员工考勤
	  		</view>
	  	</view>
		<view class="">
			<view class="border-line-view"></view>
			<view class="tn-flex tn-flex-row-between tn-bg-white course-radius">
				<view class="tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-margin-bottom">
						今日打卡
					</view>  
					<view class="tn-text-center">
					  <text class="tn-text-ellipsis">{{yuangongkaoqinInfo.puncherTotal}}人</text>
					</view>
				  </view>
				</view>
				<view class="tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-margin-bottom">
						今日未打卡
					</view>  
					<view class="tn-text-center">
					  <text class="tn-text-ellipsis">{{yuangongkaoqinInfo.noPuncherTotal}}人</text>
					</view>
				  </view>
				</view>
				<view class="tn-margin-xs">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-margin-bottom">
						本月打卡率
					</view>  
					<view class="tn-text-center">
					  <text class="tn-text-ellipsis">{{yuangongkaoqinInfo.punchRate}}%</text>
					</view>
				  </view>
				</view>
				<view class="tn-padding-sm tn-margin-xs row-flex">
				  <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
					<view class="tn-text-center"  @click="gokaoqinpages">
					  <text class="tn-icon-right-fill"></text>
					</view>
				  </view>
				</view>
			</view>
		</view>
	</view>
	
	<view class="iii-item">
	  	<view class="itemcontent tn-flex tn-flex-direction-row tn-margin-bottom-sm">
	  		<view class="tn-flex tn-flex-row-center tn-color-black frameview">
	  			<img src="../../static/icons/Frame.png" alt="" />
	  		</view>
	  		<view class="tn-flex tn-flex-1 tn-color-black tn-padding-left-sm tn-text-bold">
				消息通知
	  		</view>
	  	</view>
		<view class="">
			<view class="border-line-view"></view>
			<view class="tn-padding-top-xs" v-if="xiaoxiList.length">
				<view class="tn-margin tn-padding-sm tn-bg-white course-shadow course-radius" v-for="item in xiaoxiList" :key="item.id" @click="clickMsg(item)">
						<view class="xiaoxi-item-top tn-flex tn-flex-row-between">
							<text class="tn-text-bold">{{item.title}}</text>
							<tn-tag v-if="!item.isRead" backgroundColor="#e83a30" size="sm" fontColor="#FFFFFF" margin="10rpx 10rpx">new</tn-tag>
						</view>
						<view class="xiaoxi-content tn-margin-bottom xixiaoneirong" v-html="item.content">
							
						</view>
						<view class="xiaoxi-time">
							{{item.sendTime}}
						</view>
					</view>
			</view>
			<view class="tn-padding-top-xs tn-padding" v-else>
				暂无新消息
			</view>
		</view>
	</view>
    
    <view class="tn-padding-top-xs">
		<view class="" v-if="showNotice">
			<tn-notice-bar :list="noticelist1" mode="vertical" backgroundColor="#EFEFEF" :rightIcon="true" @click="noticeClick" @rightClick="noticeClick"></tn-notice-bar>
		</view>
	</view>
    
    <!-- 回到首页悬浮按钮-->
    <!-- <nav-index-button></nav-index-button> -->
	
	<tn-popup
	  v-if="isshowPOP"
	  v-model="showpopup"
	  length="50%"
	  mode="center"
	  backgroundColor="#ffffff"
	  width="80%"
	  height="50%"
	  :borderRadius="10"
	  @close="closedPopup"
	>
	  <view class="popup-content tn-padding">
		  <view class="pop-title tn-margin-bottom-sm tn-text-bold">
		  	{{currentMsg.title}}
		  </view>
		  <view class="pop-time tn-margin-bottom" style="font-size: 12px;">
			{{currentMsg.sendTime}}
		  </view>
		  <view class="tongzhi-pop-content" v-html="currentMsg.content">
		  </view>
	    <tn-button class="opo-bottom-btn" shape="round" @click="closedPopup()" width="220rpx" backgroundColor="#01BEFF" fontColor="#ffffff">关闭弹窗</tn-button>
	  </view>
	</tn-popup>
    </view>
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  import {urlTobase64, baseicons} from '../../util/common.js'
  export default {
    name: 'TemplateCourse',
    mixins: [template_page_mixin],
    data(){
      return {
        banner: [],
		bannerList: [],
        noticelist1: [
        ],
		noticelist2: [
		],
        kechengList: [
        ],
		xiaoxiList: [],
		imageTitle: '',
		showpopup: false,
		isshowPOP: true,
		currentMsg: {},
		showNotice: true,
		yuangongkaoqinInfo: {
			noPuncherTotal: 0,
			punchRate: '0',
			puncherTotal:0
		},
		userInfo:{},
		youerkaoqinInfo: {
			
		},
		
		moduleList: [
			{
				name: '幼儿管理',
				icon: 'ryjlicon',
				url: '/pagesB/shouye/youerliebiao',
				iconClass: 'tn-bg-orange'
			},
			{
				name: '我的考勤',
				icon: 'dtfbicon',
				url: '/pagesB/my/myKaoqin',
				iconClass: 'tn-bg-indigo'
			},
			{
				name: '动态发布',
				icon: 'dtfbicon',
				url: '/pages/banjidongtai/fabu',
				iconClass: 'tn-bg-bluepurple'
			},
			{
				name: '通知发布',
				icon: 'bjtzicon',
				url: '/pages/my/fabutongzhi',
				iconClass: 'tn-bg-purplered'
			},
			{
				name: '亲子任务',
				icon: 'qzrwicon',
				url: '/pagesA/yuanwuduan/qinzirenwu',
				iconClass: 'tn-bg-orange'
			},
			{
				name: '晨检记录',
				icon: 'cjjlicon',
				url: '/pagesA/yuanwuduan/chenjiandengji',
				iconClass: 'tn-bg-indigo'
			},
			{
				name: '服药登记',
				icon: 'fydjicon',
				url: '/pagesA/yuanwuduan/fuyaojilu',
				iconClass: 'tn-bg-bluepurple'
			},
			{
				name: '幼儿食谱',
				icon: 'yrspicon',
				url: '/pagesA/fuyao/baobaoshipu',
				iconClass: 'tn-bg-purplered'
			},
			{
				name: '安全巡检',
				icon: 'jzlyicon',
				url: '/pagesA/yuanwuduan/safeList',
				iconClass: 'tn-bg-bluepurple'
			},
		]
      }
    },
	onShow() {
	},
	computed: {
	  // 兼容小程序
	  gridItemWidth() {
		return 100 / this.col + '%'
	  }
	},
	mounted(){
		this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
		this.userInfo = uni.getStorageSync('userInfo');
		if(this.userInfo.includeEmployeeAttendance){
			this.moduleList.push(
			{
				name: '园长热线',
				icon: 'jzlyicon',
				url: '/pagesA/yuanwuduan/yuanzhangrexian',
				iconClass: 'tn-bg-orange'
			})
		}
		this.getBanner();
		this.getMsgList();
		this.getYuangongkaoqin();//includeEmployeeAttendance
		this.getYouerkaoqin();
	},
    methods: {
		getImgsbase64(icon){
			return baseicons[icon];
		},
		gojiluDetail(){
			console.log(123123)
			uni.navigateTo({
				url: '/pagesB/tongji/xiangxijilu'
			})
		},
      clickBanner(index){
		  
	  },
	  noticeClick(index){
			if(this.xiaoxiList[index]){
				
					  this.currentMsg = this.xiaoxiList[index];
					  this.showpopup = true;
					  this.readMsg(this.currentMsg.id)
			}
	  },
	  clickMsg(item){
			if(item){
				console.log(item)
					  this.currentMsg = item;
					  this.showpopup = true;
					  this.readMsg(this.currentMsg.id)
			}
	  },
				closedPopup(){
					this.showpopup = false;
					this.isshowPOP = false;
					this.$nextTick(() => {
						this.isshowPOP = true;
					})
				},
	  //sysNotice/Read 读取
	  getMsgList(){
		  this.request({
		  	url: '/sysNotice/myNotice',
		  	method: 'get',
		  	params: {
		  		pageNo: 1,
		  		pageSize: 50,
		  		isOnlySend: false,
				isRead: false
		  	},
		  }).then(res => {
		  	if(res.code == 200){
				this.xiaoxiList = [];
				this.noticelist1 = [];
				this.xiaoxiList = res.data.rows;
				this.xiaoxiList.forEach(item => {
					this.noticelist1.push(item.title)
				})
				this.showNotice = false;
				this.$nextTick(() => {this.showNotice = true;})
		  	}
		  })
	  },
	  getYouerkaoqin(){
		  this.request({
		  	url: '/ChildAttendance/ChildAttendanceStats',
		  	method: 'get',
		  }).then(res => {
		  	if(res.code == 200 && res.success){
				this.youerkaoqinInfo = res.data;
		  	}
		  })
	  },
	  getYuangongkaoqin(){
		  this.request({
		  	url: '/StaffAttendance/GetMoveStaffAttendanceRecordCurrentDayStatistics',
		  	method: 'get',
		  }).then(res => {
		  	if(res.code == 200 && res.success){
				this.yuangongkaoqinInfo = res.data;
		  	}
		  })
	  },
	  readMsg(msgId){
		  this.request({
		  	url: '/sysNotice/Read',
		  	method: 'get',
		  	params: {
		  		id: msgId
		  	},
		  }).then(res => {
		  	if(res.code == 200){
				this.getMsgList();
		  	}
		  })
	  },
      getBanner(){
      		  //http://localhost:6003/api/Slideshow/Page?pageNo=1&pageSize=10&ShowRange=1
      	this.request({
      		url: '/Slideshow/Page',
      		method: 'get',
      		params: {
      			pageNo: 1,
      			pageSize: 4
      		},
      	}).then(res => {
      		if(res.code == 200){
      				this.bannerList = res.data.rows;
      				res.data.rows.forEach(item => {
      					let obj = {
      						image: this.imageTitle + item.image.filedId,
      						title: item.title
      					}
      					this.banner.push(obj)
      				})
      		}
      	})
      },
	  
	  goDetailPage(item){
	  	uni.setStorageSync('kechengdetail', item)
	  		uni.navigateTo({
				url: `/pages/kecheng/kechengDetail?id=1&name=${item.name}`,
			})
	  },
      goMydetailpage(url){
		  if(!url){
			  uni.showToast({
			  	title: '开发中。。。',
			  	duration: 2000
			  });
			return;
		  }
      		  uni.navigateTo({
      		  	url: url
      		  })
      },
	  
	  gopages(){
		  uni.navigateTo({
		  	url: '/pagesB/tongji/youerruyuan'
		  })
	  },
	  gokaoqinpages(){
		  uni.navigateTo({
		  	url: '/pagesB/tongji/yuangongkaoqing'
		  })
	  },
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  .template-course{
  	background-color: #f6f6f6;
  }
  .btmbgview{
  	height: 480rpx;
  	background-image: linear-gradient(to right, #67D14F, #93E781);
  }
  .infovvv{
  	color: #189511;
  	overflow: hidden;
  	padding-top: 50px;
  }
  .tllttimg{
  	width: 200rpx;
  	height: 50rpx;
  	float: left;
  	margin-top: 20rpx;
  	margin-left: 30rpx;
  	margin-right: 20rpx;
  }
  .namevvv{
  	text-shadow: 1px 1px 0px rgba(255, 255, 255, 1);
  	margin-top: 30rpx;
  	float: left;
  }
  .itemsview-con{
  	width: 92%;
  	margin-left: 4%;
  	background-color: #ffffff;
  	border-radius: 16rpx;
  	margin-top: -40rpx;
  	padding: 10rpx;
  	margin-bottom: 20rpx;
  }
  .iconii__item--icon{
  	width: 55px;
  	height: 40px;
  	font-size: 26px;
  	border-radius: 50%;
  	margin-bottom: 0px;
  	position: relative;
  	z-index: 1;
  	img{
  		width: 100%;
  		height: 100%;
  	}
  }
  .iii-item{
  	width: 92%;
  	margin-left: 4%;
  	background-color: #ffffff;
  	border-radius: 16rpx;
  	padding: 20rpx;
  	margin-bottom: 20rpx;
  }
  .frameview{
  	width: 35rpx;
  	height: 35rpx;
  	img{
  		height: 100%;
  		width: 100%;
  	}
  }
  .border-line-view{
	  width: 100%;
	  height:2rpx;
	  background-color: #f6f6f6;
  }
  /* 自定义导航栏内容 start */
  .custom-nav {
    height: 100%;
    
    &__back {
      margin: auto 5rpx;
      font-size: 40rpx;
      margin-right: 10rpx;
      margin-left: 30rpx;
      flex-basis: 5%;
    }
    
    &__search {
      flex-basis: 60%;
      width: 100%;
      height: 100%;
      
      &__box {
        width: 100%;
        height: 70%;
        padding: 10rpx 0;
        margin: 0 30rpx;
        border-radius: 60rpx 60rpx 0 60rpx;
        font-size: 24rpx;
      }
      
      &__icon {
        padding-right: 10rpx;
        margin-left: 20rpx;
        font-size: 30rpx;
      }
      
      &__text {
        color: #AAAAAA;
      }
    }
  }
  /*logo start */
  .logo-image{
    width: 65rpx;
    height: 65rpx;
    position: relative;
  }
  .logo-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 50%;
  }
  /* 自定义导航栏内容 end */
  
  /* 内容布局 start*/
  .course-shadow{
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .course-radius{
    border-radius: 15rpx;
  }
  
  /* 图标容器15 start */
  .icon15 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
  
            
        }
      }
    }
  }
  
  /* 业务展示 start */
  .tn-info {
    
    &__container {
      margin-top: 10rpx;
      margin-bottom: 50rpx;
    }
    
    &__item {
      width: 48%;
      margin: 15rpx 0rpx;
      padding: 40rpx 30rpx;
      border-radius: 15rpx;
      
  
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/3.png);
        }
      
      &__left {
        
        &--icon {
          width: 80rpx;
          height: 80rpx;
          border-radius: 30%;
          font-size: 50rpx;
          margin-right: 20rpx;
          position: relative;
          z-index: 1;
          
          &::after {
            content: " ";
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 1;
            transform: scale(1, 1);
            background-size: 100% 100%;
            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
          }
        }
        
        &__content {
          font-size: 30rpx;
          
          &--data {
            margin-top: 5rpx;
            font-weight: bold;
          }
        }
      }
      
      &__right {
        &--icon {
          position: absolute;
          right: 0upx;
          top: 50upx;
          font-size: 100upx;
          width: 108upx;
          height: 108upx;
          text-align: center;
          line-height: 60upx;
          opacity: 0.15;  
        }
      }
    }
  }
  /* 业务展示 end */
  
  /* 文章内容 start*/
  .tn-blogger-content {
    &__wrap {
      box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
      border-radius: 20rpx;
      margin: 15rpx;
    }
    
    &__info {
      &__btn {
        margin-right: -12rpx;
        opacity: 0.5;
      }
    }
    
    &__label {
      &__item {
        line-height: 45rpx;
        padding: 0 20rpx;
        margin: 5rpx 18rpx 0 0;
        
        &--prefix {
          color: #82B2FF;
          padding-right: 10rpx;
        }
      }
      
      &__desc {
        line-height: 35rpx;
      }
    }
    
    &__main-image {
      border-radius: 16rpx 16rpx 0 0;
      
      &--1 {
        max-width: 690rpx;
        min-width: 690rpx;
        max-height: 400rpx;
        min-height: 400rpx;
      }
      
      &--2 {
        max-width: 260rpx;
        max-height: 260rpx;
      }
      
      &--3 {
        height: 212rpx;
        width: 100%;
      }
    }
    
    &__count-icon {
      font-size: 30rpx;
      padding-right: 5rpx;
    }
  }
  
  .image-music{
    padding: 100rpx 0rpx;
    font-size: 16rpx;
    font-weight: 300;
    position: relative;
  }
  .image-pic{
    background-size: cover;
    background-repeat:no-repeat;
    // background-attachment:fixed;
    background-position:top;
    border-radius: 20rpx 20rpx 0 0;
  }
  /* 文章内容 end*/
  
  /* 底部tabbar start*/
  .footerfixed{
   position: fixed;
   width: 100%;
   bottom: 0;
   z-index: 999;
   background-color: #FFFFFF;
   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .tabbar {
    display: flex;
    align-items: center;
    min-height: 110rpx;
    justify-content: space-between;
  	padding: 0;
  	height: calc(110rpx + env(safe-area-inset-bottom) / 2);
  	padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  }
  
  .tabbar .action {
  	font-size: 22rpx;
  	position: relative;
  	flex: 1;
  	text-align: center;
  	padding: 0;
  	display: block;
  	height: auto;
  	line-height: 1;
  	margin: 0;
  	overflow: initial;
  }
  
  .tabbar .action .bar-icon {
  	width: 100rpx;
  	position: relative;
  	display: block;
  	height: auto;
  	margin: 0 auto 10rpx;
  	text-align: center;
  	font-size: 42rpx;
  }
  
  .tabbar .action .bar-icon image {
  	width: 50rpx;
  	height: 50rpx;
  	display: inline-block;
  }
  .row-flex{
	  display: flex;
	      flex-direction: row;
  }
  .tn-icon-right-fill{
	  font-size: 20px;
	  color: #9DD757;
  }
  .image-article {
    border-radius: 8rpx;
    border: 1rpx solid #F8F7F8;
    width: 200rpx;
    height: 200rpx;
    position: relative;
  }

  .image-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border-radius: 10rpx;
  }

  .article-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  .kecheng-height{
  }
  .popup-content{
	  position: relative;
	  height: 100%;
  }
  .tongzhi-pop-content{
	  position: absolute;
	  top: 130rpx;
	  left: 50rpx;
	  right: 50rpx;
	  bottom: 120rpx;
	  overflow-y: auto;
  }
  .opo-bottom-btn{
	  position: absolute;
	  bottom: 20rpx;
	  left: 50%;
	  margin-left: -100rpx;
  }
  .xixiaoneirong{
	  display: inline-block;
	  max-height: 70rpx;
	  overflow: hidden;
  }
  .detail-text{
	  color: #01BEFF;
  }
  .paddingtops{
	  padding-top: 80px;
  }
</style>
